<template>
	<view class="qisim-list">
		<div class="box">
			<div :class="['item', {'actived':qisimId==item.id}]" v-for="(item, index) in info.url" :key="index"
				@click="handlePreplay(item)">
				<div class="text">{{index+1}}</div>
				<div class="vip" v-if="item.is_vip">
					<div class="text">vip</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				require: true,
			},
			qisimId: {
				type: String,
				require: true,
			},
			playState: {
				type: String,
				require: true,
			},
		},
		methods: {
			handlePreplay(item) {
				if (this.playState == 'loading') return
				if (this.qisimId == item.id) return
				this.$emit('handlePreplay', item.id)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.qisim-list {
		padding: 0 15px 12px;

		.box {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row-reverse;

			.item {
				width: 40px;
				height: 40px;
				border-radius: calc(100% / 3);
				position: relative;
				color: #58596d;
				background-color: #f1f1f1;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: calc((100% - 7 * 40px) / 6);
				margin-top: 10px;
				overflow: hidden;

				&:nth-of-type(7n) {
					margin-left: 0;
				}

				&:nth-of-type(-n + 7) {
					margin-top: 0;
				}

				&.actived {
					background-image: linear-gradient(45deg, #2f71ff 0%, #15aaff 100%);
					color: #fff;
				}

				.vip {
					position: absolute;
					font-size: 12px;
					background-image: linear-gradient(45deg, #f12711 0%, #f5af19 100%);
					width: 18px;
					height: 18px;
					line-height: 18px;
					top: 0;
					left: 0;
					border-radius: 50%;
					color: #f1f1f1;

					.text {
						transform: scale(.75) translateY(-2px);
					}
				}
			}
		}
	}
</style>